<template>
     <div class="find-card" @click="goto">
        <div class="img-box">
            <img :src="cardObj.image" alt="">
        </div>
        <div class="text">
            <p class="tit">{{cardObj.title}}</p>
            <p class="introduction">
                {{cardObj.summary}}
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name:"FindCard",
    methods:{
        goto(){
            this.$router.push({ path: `/card-read/${this.cardObj.id}`});
        }
    },
    props:{
        cardObj:{
            type:Object
        }
    }
}
</script>

<style lang="scss" scoped>
.find-card{
    display: flex;
    background-color: #fff;
    padding: 15px 20px;
    height: 140px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .img-box{
        flex-shrink: 0;
        height: 110px;
        border-radius: 5px;
        margin-right: 15px;
        box-shadow: 3px 0px 10px 0px #ccc,
                    -3px 0px 10px 0px #ccc,
                    0px 10px 10px 0px #ccc;
        img{
            height: 100%;
            border-radius: 5px;
        }
    }
    .text{
        .tit{
            font-size: 16px;
            color: rgb(31, 30, 30);
            margin-bottom: 10px;
        }
        .introduction{
            font-size :13px;
            line-height: 20px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    }
}
</style>